<template>
    <div class="textDetail">
         <!-- 上下边距-->
        <p class="header_detail">文本内容</p>
        <div class="detail">
            <p class="form_title">文本</p>
            <el-input @input="toParent" type='textarea' placeholder="限制500字以内"   :rows="6" v-model="data.textContent"></el-input>
            <el-form ref="form" label-position="left"  :model="data" label-width="80px">
                <el-form-item label='文字字体：'>
                    <el-select v-model='data.textFontFamily' @change='toParent'>
                        <el-option value='Microsoft YaHei' label='微软雅黑'></el-option>
                        <el-option value='SimHei' label='黑体'></el-option>
                        <el-option value='SimSun' label='宋体'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label='文本字号：' >
                    <el-select v-model='data.fontSize'  @change='toParent'>
                        <el-option v-for='(item,index) in fontOption' :label='item.label' :value='item.value' :key='index'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label='`文本颜色：${data.textColor}`' label-width="160px" >
                    <el-color-picker v-model="data.textColor" @change='toParent'></el-color-picker>
                </el-form-item>
                 <el-form-item :label='`背景颜色：${data.bgColor}`' label-width="160px" >
                    <el-color-picker v-model="data.bgColor" @change='toParent'></el-color-picker>
                </el-form-item>
                <el-form-item label='显示位置：' label-width="100px" >
                    <el-radio-group v-model="data.textAlign" @change="toParent">
                        <el-radio label="left">居左</el-radio>
                        <el-radio label="center">居中</el-radio>
                        <el-radio label="right">居右</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label='小程序链接：' label-width="100px">
                    <c-linkselect  v-model="data.wxJumpUrl" @change="toParent"></c-linkselect >
                </el-form-item>
            </el-form>
        </div>
        <div class="detail_content detail_set">
             <div class="block">
                <p class="form_title">上边框距离  <span>(0为贴合，最大100像素)</span></p>
                <el-slider
                    v-model="data.paddingTop"
                    show-input
                    :max='100'
                    :step="1"
                    @change='toParent'>
                </el-slider>
            </div>
            <div class="block">
                <p class="form_title">下边框距离  <span>(0为贴合，最大100像素)</span></p>
                <el-slider
                    v-model="data.paddingBottom"
                    show-input
                    :max='100'
                    :step="1"
                    @change='toParent'>
                </el-slider>
            </div>
        </div>
         <div  class="eventBus">
            <p class="event_title" >事件（选填）</p>
            <el-input @change='toParent' v-model='data.event' :disabled="data.eventChecked" placeholder="请输入事件ID"></el-input>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            data:{},
            fontOption:[],
            textContent:'',  //文本值
        }
    },
    props:{
        propData:{
            type:Object
        }
    },
    methods:{
        toParent(){
            if(this.data.textContent && this.data.textContent.length>500){
                return this.$message.error('字数不超过500字')
            }
            let data = {
                ...this.data
            }
            this.$emit('toParent',data)
        }
    },
    watch:{
        propData:function(val){
           this.data = JSON.parse(JSON.stringify(this.propData)); 
        },
        'data.textColor':function(val){
           if(!val){
               this.data.textColor='#666666'
           }
        },
        'data.bgColor':function(val){
             if(!val){
               this.data.bgColor='#FFFFFF'
           }
        },
        wxJumpUrl:function(val){
            debugger;
        }
    },
    mounted(){
        this.fontOption = [];
        for(let i=24;i<84;i=i+4){
            this.fontOption.push({
                label:i,
                value:i
            })
        }
        this.data = JSON.parse(JSON.stringify(this.propData)); 
        this.toParent();
        console.log(this.propData,'接收到的参数')
        // debugger;
    }    

}
</script>
<style lang="less" scoped>
.header_detail{
    height:50px;
    line-height:50px;
    // border-bottom:1px solid #E4E4E4;
    font-size: 16px;
    color: #000000;
    padding-left:16px;
}
.detail{
    padding: 16px 16px 0 16px;
    border-top: 1px solid #E4E4E4;
    font-size: 14px;
    .form_title{
        position: relative;
        margin: 0 0 16px 0;
        color:#666666;
    }
}
.detail_content{
    padding: 16px 16px 0 16px;
    border-top: 1px solid #E4E4E4;
    font-size: 14px;
    margin-top: 20px;
    .form_title{
        position:relative;
        left:-10px;
        margin-top: 10px;
        span{
            color: #888888;
        }
    }
}
.detail_set{
     padding: 16px 16px 0 25px;
}
/deep/.el-radio{
    margin-right:6px;
}
/deep/.el-slider__bar{
    background-color:#FF8244;
}
/deep/.el-slider__button{
    border: 2px solid #FF8244;
}
/deep/.el-color-picker__trigger{
    height:30px;
}
/deep/.el-form-item {
    margin: 10px 0 10px 0;
    height: auto;
    display: block;
}
/deep/.el-form-item__content{
    // width:100%;
    // margin-left:0 !important;
}
 .eventBus{
        font-size: 14px;
        padding:5px 16px 0 16px;
        line-height: 40px;
        .event_title{
        //    margin-bottom:10px;
        }
    }
</style>